<template>
  <!-- :router="true"开启用index路由跳转 -->
  <el-menu :default-active="$route.path" :router="true">

    <!-- 单级菜单 -->
    <el-menu-item v-for="item in noChildren()" :key="item.index" :index="item.index + ''">
      <el-icon>
        <font-awesome-icon :icon="item.icon" />
      </el-icon>
      <span style="user-select:none;">{{ item.label }}</span>
    </el-menu-item>

    <!-- 多级菜单 -->
    <el-sub-menu v-for="item in hasChildren()" :key="item.name" :index="item.name + ''">
      <template #title>
        <el-icon>
          <font-awesome-icon :icon="item.icon" />
        </el-icon>
        <span style="user-select:none;">{{ item.label }}</span>
      </template>
      <!-- 子级菜单 -->
      <el-menu-item v-for="subItem in item.children" :index="subItem.index + ''" :key="subItem.index">
        <el-icon>
          <font-awesome-icon :icon="subItem.icon" />
        </el-icon>
        <span style="user-select:none;">{{ subItem.label }}</span>
      </el-menu-item>
    </el-sub-menu>

  </el-menu>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore();
let isSeller = false;

const menuData = ref([]);

// 没有子级的侧边栏选项
const noChildren = () => {
  return menuData.value.filter((item) => !item.children);
};

// 有子级的侧边栏选项
const hasChildren = () => {
  return menuData.value.filter((item) => item.children);
};

onMounted(() => {
  isSeller = store.state.user.role === 2;
  if (isSeller) {
    menuData.value = store.state.sellerUserCenterMenu;
  } else {
    menuData.value = store.state.normalUserCenterMenu;
  }
})
</script>

<style lang="less" scoped>
.el-menu {
  border-radius: 10px;
  border: 2px solid rgba(170, 165, 165, 0.244);
  height: 1050px;
}
</style>